<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<!--    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂计算器</title>
    <!-- 浅色主题样式表 -->
    <link id="light-stylesheet" rel="stylesheet" href="./lib/style/style.css">
    <!-- 深色主题样式表，初始隐藏 -->
    <link id="dark-stylesheet" rel="stylesheet" href="./lib/style/dark-style.css" disabled>
</head>

<body>
<div class="calculator">
    <input type="text" id="display" readonly>
    <div class="buttons">
        <button data-action="clear">C</button>
        <button data-action="backspace">←</button>
        <button data-value="(">(</button>
        <button data-value=")">)</button>
        <button data-value="/">/</button>
        <button data-value="7">7</button>
        <button data-value="8">8</button>
        <button data-value="9">9</button>
        <button data-value="*">*</button>
        <button data-value="4">4</button>
        <button data-value="5">5</button>
        <button data-value="6">6</button>
        <button data-value="-">-</button>
        <button data-value="1">1</button>
        <button data-value="2">2</button>
        <button data-value="3">3</button>
        <button data-value="+">+</button>
        <button data-value="0">0</button>
        <button data-value=".">.</button>
        <button data-action="calculate">=</button>
        <!-- 添加切换样式表的按钮 -->
        <button id="theme-switcher" data-theme="dark">切换到深色主题</button>
    </div>
</div>
<script src="./lib/js/calculator.js"></script>
<script>
    function executeThemeSwitcher(){
        // 在代码中，lightStylesheet 和 darkStylesheet 是通过 document.getElementById 获取的 HTMLLinkElement 对象。
        // 继承关系
        // HTMLLinkElement → HTMLElement → Element → Node → EventTarget → Object
        // 属性有哪些
        //         HTMLLinkElement 对象表示 HTML 中的 `<link>` 元素，它具有一系列属性用于描述链接关系。以下是 HTMLLinkElement 的主要属性：
        // - `as`: 获取或设置资源的预期加载方式。
        // - `crossOrigin`: 获取或设置 CORS 设置属性。
        // - `disabled`: 获取或设置是否禁用样式表（仅适用于样式表）。
        // - `href`: 获取或设置引用资源的 URL。
        // - `hreflang`: 获取或设置资源的语言代码。
        // - `media`: 获取或设置媒体查询，定义了在什么情况下会应用该资源。
        // - `rel`: 获取或设置链接类型的字符串。
        // - `rev`: 已废弃，不建议使用。
        // - `sizes`: 获取或设置图标尺寸信息（如 favicon）。
        // - `type`: 获取或设置关联文档的 MIME 类型。
        //
        // 这些属性可以帮助你更好地控制和配置 `<link>` 标签的行为。

        // 获取界面 dom 元素中对象

        // 获取主题切换按钮元素
        const themeSwitcher = document.getElementById('theme-switcher');
        // 获取浅色主题样式表元素
        const lightTheme  = document.getElementById('light-stylesheet');
        // 获取深色主题样式表元素
        const darkTheme  = document.getElementById('dark-stylesheet');

        if (!themeSwitcher || !lightTheme || !darkTheme) {
            console.error('主题切换所需元素未找到');
            return;
        }

        // 切换主题的函数
        const toggleTheme = () => {
            const isDarkMode = themeSwitcher.dataset.theme === 'dark';
            darkTheme.disabled = !isDarkMode;
            lightTheme.disabled = isDarkMode;
            themeSwitcher.dataset.theme = isDarkMode ? 'light' : 'dark';
            themeSwitcher.textContent = isDarkMode ? '切换到浅色主题' : '切换到深色主题';
        };

        // 为主题切换按钮添加点击事件监听器
        themeSwitcher.addEventListener('click', toggleTheme);

        // 根据用户系统偏好自动选择初始主题
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            console.log('用户系统偏好为深色模式');
            themeSwitcher.dataset.theme = 'dark';
            toggleTheme();
        }
    }

    // 初始化界面
    function initPage(){
        executeThemeSwitcher();
    }

//     匿名函数
    (function () {
        initPage();
    })();

</script>
</body>

</html>